<template>
  <div class="box">{{ 1 + 1 }}</div>
  <div>{{ a }} + {{ b }} = {{ a + b }}</div>
  <button @click="add">添加</button>
  <div v-html="html"></div>
</template>
<script>
import axios from 'axios'
import { marked } from 'marked'
import { markedEmoji } from 'marked-emoji'
import { Octokit } from '@octokit/rest'
export default {
  data() {
    return {
      a: 1,
      b: 2,
      html: ''
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
      this.a++
    }
  },
  async mounted() {
    console.log(`helloworld`)
    const octokit = new Octokit()
    const res = await octokit.rest.emojis.get()
    const emojis = res.data
    console.log(emojis)
    const options = {
      emojis,
      renderer: (token) => `<img alt="${token.name}" src="${token.emoji}" class="marked-emoji-img">`
    }
    marked.use(markedEmoji(options))
    const result = marked.parse('I :heart: marked! :tada:')
    this.html = result
  }
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
